<template>
  <el-dialog :title="$t('createProject')" :close-on-click-modal="false" :visible.sync="visible" @close="onHide">
    <el-form ref="projectForm" :model="projectFormData" :rules="projectRule" size="mini" label-width="150px"
      style="width: 600px;" @submit.native="onProjectCreateSave">
      <el-form-item :label="$t('projectName')" prop="name">
        <el-input v-model="projectFormData.name" show-word-limit maxlength="50" />
      </el-form-item>
      <el-form-item label="项目编码" prop="code">
        <el-input v-model="projectFormData.code" show-word-limit maxlength="50" />
      </el-form-item>
      <el-form-item :label="$t('projectDesc')" prop="description">
        <el-input v-model="projectFormData.description" type="textarea" show-word-limit maxlength="100" />
      </el-form-item>
      <el-form-item :label="$t('visitPermission')">
        <el-radio-group v-model="projectFormData.isPrivate">
          <el-radio class="el-icon-lock" :label="1">{{ $t('private') }}</el-radio>
          <el-radio :label="0">{{ $t('public') }}</el-radio>
        </el-radio-group>
        <question-private />
      </el-form-item>
      <el-row>
        <el-col :span='12'>
          <el-form-item label="是否派生项目">
            <el-radio-group v-model="projectFormData.isDerive">
              <el-radio :label="0">否</el-radio>
              <el-radio :label="1">是</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span='12'>
          <el-form-item style="margin-left: -80px" v-if="projectFormData.isDerive" label="项目来源：" prop="deriveSourceProjectId">
            <el-select  
              v-model="projectFormData.deriveSourceProjectId" :clearable="true">
              <el-option v-for="item in projectData" :key="item.value" :label="item.label" :value="item.value">
                {{ item.label }}
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">{{ $t('dlgCancel') }}</el-button>
      <el-button type="primary" native-type="submit" @click="onProjectCreateSave">{{ $t('dlgSave') }}</el-button>
    </div>
  </el-dialog>
</template>
<script>
import QuestionPrivate from '@/components/QuestionPrivate'
export default {
  name: 'ProjectCreateDialog',
  components: { QuestionPrivate },
  props: {
    success: {
      type: Function,
      default: () => { }
    }
  },
  data() {
    return {
      visible: false,
      projectFormData: {
        code:'',
        name: '',
        description: '',
        spaceId: '',
        isPrivate: 1,
        isDerive: 0,
        deriveSourceProjectId: ''
      },
      projectRule: {
        name: [
          { required: true, message: this.$t('notEmpty'), trigger: 'blur' }
        ],
        spaceId: [
          { required: true, message: this.$t('notEmpty'), trigger: 'blur' }
        ],
        deriveSourceProjectId: [
          { required: true, validator: this.deriveSourceProjectIdCheck, trigger: 'blur' }
        ],
      },
      spaceData: [],
      projectData: []
    }
  },
  methods: {
    deriveSourceProjectIdCheck(rule, value, callback) {
      if (this.projectFormData.isDerive && !value) {
        callback(new Error('请选择项目来源'));
      }
      else {
        callback()
      }
    },
    onProjectCreateSave() {
      const promiseMain = this.$refs.projectForm.validate()
      Promise.all([promiseMain]).then(validArr => {
        // 到这里来表示全部内容校验通过
        this.post('/project/add', this.projectFormData, resp => {
          this.visible = false
          this.tipSuccess(this.$t('addSuccess'))
          this.initPerm()
          this.success(resp.data)
        })
      }).catch((e) => {
      }) // 加上这个控制台不会报Uncaught (in promise)
    },
    show(spaceId) {
      if (!spaceId) {
        this.tipError('show()必须传spaceId参数')
        return false
      }
      this.projectFormData.spaceId = spaceId
      //获取可被派生的项目列表
      this.get('/space/project/list', { spaceId: spaceId }, resp => {
        this.projectData = resp.data.filter(p => p.isDerive === 0).map(item => ({ value: item.id, label: item.name }))
      })
      this.visible = true
    },
    onHide() {
      this.resetForm('projectForm')
    }
  }
}
</script>
